<template>
	<div class="ConfirmDialog">
		<el-dialog
			v-model="dialogVisible"
			:title="title"
			:close-on-click-modal="false"
			:width="width"
			:before-close="clickClose"
			draggable
			@close="close"
			@closed="closed"
			v-bind="{
				...prop,
			}"
		>
			<slot name="content"></slot>
			<template #footer v-if="showFooter">
				<slot name="footer"></slot>
				<div class="left">
					<slot name="footerLeft"></slot>
				</div>
				<div class="right">
					<slot name="footerRight"></slot>
					<template v-if="showButton">
						<YhButton @click="cancel">{{ cancelText }}</YhButton>
						<YhButton @click="confirm" :disabled="disabled" :loading="loading" type="primary">{{ confirmText }}</YhButton>
					</template>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { YhButton } from 'yh-ui';

const props = defineProps({
	// 弹窗显示隐藏
	showDialog: {
		type: Boolean,
		default: false,
	},
	// 弹窗标题
	title: {
		type: String,
		default: '默认标题',
	},
	// 底部按钮显示隐藏
	showButton: {
		type: Boolean,
		default: true,
	},
	// 底部整体显示隐藏
	showFooter: {
		type: Boolean,
		default: true,
	},
	// 确认按钮loading
	loading: {
		type: Boolean,
		default: false,
	},
	// 确认按钮禁用
	disabled: {
		type: Boolean,
		default: false,
	},
	// 确认按钮文字
	confirmText: {
		type: String,
		default: '确认',
	},
	// 取消按钮文字
	cancelText: {
		type: String,
		default: '取消',
	},
	// 弹窗宽度
	width: {
		type: [String, Number],
		default: null,
	},
	// 其他属性
	prop: {
		type: Object,
		default: () => null,
	},
});

const emits = defineEmits(['confirm', 'cancel', 'close', 'closed', 'clickClose', 'update:showDialog']);

const dialogVisible = computed({
	get: () => props.showDialog,
	set: (val) => {
		emits('update:showDialog', val);
	},
});

// 弹窗确认
const confirm = () => {
	(document.activeElement as HTMLElement).blur();
	emits('confirm');
};
// 弹窗取消
const cancel = () => {
	(document.activeElement as HTMLElement).blur();
	emits('update:showDialog', false);
	emits('cancel');
	emits('clickClose');
};
// 弹窗关闭前
const close = () => {
	(document.activeElement as HTMLElement).blur();
	emits('close');
};
// 弹窗关闭后
const closed = () => {
	emits('closed');
};
// clickClose事件：点击弹窗关闭按钮或点击取消
const clickClose = (done: any) => {
	emits('clickClose');
	done();
};
</script>

<style scoped lang="scss">
.ConfirmDialog {
	:deep(.el-dialog) {
		.el-dialog__title {
			font-size: 16px;
		}

		.el-dialog__body {
		}

		.el-dialog__footer {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
